<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/template/template.xhtml"
	xmlns:p="http://primefaces.org/ui"
>
	<ui:define name="conteudo">
 	<meta charset="UTF-8"/>
	<div class="page-header">
		<ol class="breadcrumb breadcrumb-page">
			<li>
				<h:outputLink>
					<h:outputText value="#{mensagens['display.voce.esta.em']}" />
				</h:outputLink>
			</li>
			<li>
				<h:outputText value="#{mensagens['display.menu.topico']}" />
			</li>
			<li class="active">
				<h:outputText value="#{mensagens['display.novo.topico']}" />
			</li>
		</ol>
		<h:messages id="mensagens" globalOnly="true" fatalClass="alert alert-danger alert-dark" errorClass="alert alert-warning alert-dark" infoClass="alert alert-info alert-dark" warnClass="alert alert-dark"/>
	</div>
	<div id="content" class="content">
		<div class="row">
			<div class="col-md-12">
				<h:form prependId="false" id="form" acceptcharset="UTF-8" styleClass="form-horizontal">
					<div class="panel">
						<div class="panel-heading">
							<span class="panel-title"><h:outputText value="#{mensagens['display.novo.topico']}" /></span>
						</div>
						
						<div class="panel-body" >
							<div class="form-group">
								<label class="control-label col-sm-2">
									<h:outputText value="#{mensagens['display.titulo']}"/>
								</label>
								<div class="col-sm-10">
									<h:inputText id="titulo" autocomplete="off" value="#{novoTopicoBean.novoTopico.titulo}" maxlength="128" styleClass="form-control" required="true" requiredMessage="#{mensagens['display.campo.obrigatorio']}"/>
									<h:message for="titulo" errorClass="msg error"/>
								</div>
							</div>
							<div class="form-group"> 
								<label class="control-label col-sm-2">
									<h:outputText value="#{mensagens['display.descricao']}"/>
								</label>
								<div class="col-sm-10">
									<h:inputTextarea id="descricao" value="#{novoTopicoBean.novoTopico.descricao}"  styleClass="editorTexto form-control"  required="true" requiredMessage="#{mensagens['display.campo.obrigatorio']}"/>
									<h:message for="descricao" errorClass="msg error"/>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-sm-2">
									<h:outputText value="#{mensagens['display.categoria']}"/>
								</label>
								<div class="col-sm-10">
									<div class="select2-primary">
										 <h:selectManyMenu id="categorias" value="#{novoTopicoBean.categoriasSelecionadas}"   styleClass="form-control autocompleteCategoria select2-offscreen" tabindex="-1" required="true" requiredMessage="#{mensagens['display.campo.obrigatorio']}">
											<f:selectItems value="#{novoTopicoBean.categorias}"  var="categoria" itemValue="#{categoria.idCategoria}" itemLabel="#{categoria.deCategoria}"/>
										</h:selectManyMenu>
									</div>
									<h:message for="categorias" errorClass="msg error"/>
								</div>
							</div>
							
						</div>
						<div class="panel-footer">
							<div class="form-group">
								<div class="col-sm-offset-2 col-sm-10">
									<h:commandButton  action="#{novoTopicoBean.postarTopico}" value="#{mensagens['display.confirmar']}" styleClass="btn btn-primary btn-xs"/>
								</div>	
							</div>
						</div>
					</div>
					</h:form>
				</div>
			</div>
		</div>
	</ui:define>
</ui:composition>